<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.container {
  display: inline-block;
}
svg {
  width: 50px;
  height: 100px;
}
.parent {
  stroke-miterlimit: 1.3;
}
.target {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: miter;
  stroke-miterlimit: 1.5;
}
.expected {
  stroke: green;
}
</style>
<body>
<template id="target-template">
<svg><path d="M0,100 l25,-50 l25,50" /></svg>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
  property: 'stroke-miterlimit',
  from: neutralKeyframe,
  to: '2',
}, [
  {at: -0.4, is: '1.3'},
  {at: 0, is: '1.5'},
  {at: 0.2, is: '1.6'},
  {at: 0.6, is: '1.8'},
  {at: 1, is: '2'},
  {at: 1.5, is: '2.25'},
]);

assertInterpolation({
  property: 'stroke-miterlimit',
  from: 'initial',
  to: '2',
}, [
  {at: -0.4, is: '4.8'},
  {at: 0, is: '4'},
  {at: 0.2, is: '3.6'},
  {at: 0.6, is: '2.8'},
  {at: 1, is: '2'},
  {at: 1.5, is: '1'},
]);

assertInterpolation({
  property: 'stroke-miterlimit',
  from: 'inherit',
  to: '2',
}, [
  {at: -0.4, is: '1.02'},
  {at: 0, is: '1.3'},
  {at: 0.2, is: '1.44'},
  {at: 0.6, is: '1.72'},
  {at: 1, is: '2'},
  {at: 1.5, is: '2.35'},
]);

assertInterpolation({
  property: 'stroke-miterlimit',
  from: 'unset',
  to: '2',
}, [
  {at: -0.4, is: '1.02'},
  {at: 0, is: '1.3'},
  {at: 0.2, is: '1.44'},
  {at: 0.6, is: '1.72'},
  {at: 1, is: '2'},
  {at: 1.5, is: '2.35'},
]);

assertInterpolation({
  property: 'stroke-miterlimit',
  from: '1',
  to: '3',
}, [
  {at: -0.4, is: '1'},
  {at: 0, is: '1'},
  {at: 0.2, is: '1.4'},
  {at: 0.6, is: '2.2'},
  {at: 1, is: '3'},
  {at: 1.5, is: '4'}
]);
</script>
</body>
